<template>
  <div class="api-test-container">
    <el-card class="test-card">
      <template #header>
        <div class="card-header">
          <span>API 连接测试</span>
        </div>
      </template>
      
      <div class="test-section">
        <h3>后端连接状态</h3>
        <el-button @click="testConnection" :loading="testing" type="primary">
          测试连接
        </el-button>
        <div v-if="connectionResult" class="result-display">
          <el-alert
            :title="connectionResult.success ? '连接成功' : '连接失败'"
            :type="connectionResult.success ? 'success' : 'error'"
            :description="connectionResult.message"
            show-icon
          />
        </div>
      </div>

      <el-divider />

      <div class="test-section">
        <h3>用户登录测试</h3>
        <el-form :model="loginForm" label-width="100px">
          <el-form-item label="邮箱">
            <el-input v-model="loginForm.email" placeholder="请输入邮箱" />
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" />
          </el-form-item>
          <el-form-item>
            <el-button @click="testLogin" :loading="loginTesting" type="success">
              测试登录
            </el-button>
          </el-form-item>
        </el-form>
        <div v-if="loginResult" class="result-display">
          <el-alert
            :title="loginResult.success ? '登录成功' : '登录失败'"
            :type="loginResult.success ? 'success' : 'error'"
            :description="loginResult.message"
            show-icon
          />
          <pre v-if="loginResult.data" class="json-display">{{ JSON.stringify(loginResult.data, null, 2) }}</pre>
        </div>
      </div>

      <el-divider />

      <div class="test-section">
        <h3>管理员登录测试</h3>
        <el-form :model="adminForm" label-width="100px">
          <el-form-item label="用户名">
            <el-input v-model="adminForm.username" placeholder="请输入管理员用户名" />
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="adminForm.password" type="password" placeholder="请输入管理员密码" />
          </el-form-item>
          <el-form-item>
            <el-button @click="testAdminLogin" :loading="adminTesting" type="warning">
              测试管理员登录
            </el-button>
          </el-form-item>
        </el-form>
        <div v-if="adminResult" class="result-display">
          <el-alert
            :title="adminResult.success ? '登录成功' : '登录失败'"
            :type="adminResult.success ? 'success' : 'error'"
            :description="adminResult.message"
            show-icon
          />
          <pre v-if="adminResult.data" class="json-display">{{ JSON.stringify(adminResult.data, null, 2) }}</pre>
        </div>
      </div>

      <el-divider />

      <div class="test-section">
        <h3>房源数据测试</h3>
        <el-button @click="testHouses" :loading="housesTesting" type="info">
          获取房源列表
        </el-button>
        <div v-if="housesResult" class="result-display">
          <el-alert
            :title="housesResult.success ? '获取成功' : '获取失败'"
            :type="housesResult.success ? 'success' : 'error'"
            :description="housesResult.message"
            show-icon
          />
          <pre v-if="housesResult.data" class="json-display">{{ JSON.stringify(housesResult.data, null, 2) }}</pre>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import api from '@/utils/api'
import { userLogin, adminLogin, getAllHouses } from '@/utils/apiService'

// 测试状态
const testing = ref(false)
const loginTesting = ref(false)
const adminTesting = ref(false)
const housesTesting = ref(false)

// 结果显示
const connectionResult = ref(null)
const loginResult = ref(null)
const adminResult = ref(null)
const housesResult = ref(null)

// 表单数据
const loginForm = reactive({
  email: '277484@qq.com',
  password: '007789abc'
})

const adminForm = reactive({
  username: 'admin',
  password: 'admin123'
})

// 测试连接
const testConnection = async () => {
  testing.value = true
  connectionResult.value = null
  
  try {
    const response = await api.get('/test/connection')
    connectionResult.value = {
      success: true,
      message: '后端服务连接正常',
      data: response.data
    }
  } catch (error) {
    connectionResult.value = {
      success: false,
      message: `连接失败: ${error.message}`,
      data: null
    }
  } finally {
    testing.value = false
  }
}

// 测试用户登录
const testLogin = async () => {
  loginTesting.value = true
  loginResult.value = null
  
  try {
    const response = await userLogin(loginForm)
    loginResult.value = {
      success: true,
      message: '用户登录成功',
      data: response
    }
  } catch (error) {
    loginResult.value = {
      success: false,
      message: `登录失败: ${error.message}`,
      data: null
    }
  } finally {
    loginTesting.value = false
  }
}

// 测试管理员登录
const testAdminLogin = async () => {
  adminTesting.value = true
  adminResult.value = null
  
  try {
    const response = await adminLogin(adminForm)
    adminResult.value = {
      success: true,
      message: '管理员登录成功',
      data: response
    }
  } catch (error) {
    adminResult.value = {
      success: false,
      message: `登录失败: ${error.message}`,
      data: null
    }
  } finally {
    adminTesting.value = false
  }
}

// 测试房源数据
const testHouses = async () => {
  housesTesting.value = true
  housesResult.value = null
  
  try {
    const response = await getAllHouses()
    housesResult.value = {
      success: true,
      message: '房源数据获取成功',
      data: response
    }
  } catch (error) {
    housesResult.value = {
      success: false,
      message: `获取失败: ${error.message}`,
      data: null
    }
  } finally {
    housesTesting.value = false
  }
}
</script>

<style scoped>
.api-test-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.test-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 18px;
}

.test-section {
  margin-bottom: 20px;
}

.test-section h3 {
  margin-bottom: 15px;
  color: #409eff;
}

.result-display {
  margin-top: 15px;
}

.json-display {
  background: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  margin-top: 10px;
  font-size: 12px;
  max-height: 300px;
  overflow-y: auto;
}
</style>
